<template>
	<view class="selectContainer">
		<view class="navBarContainer">
			<view class="navBar">
				<view class="back" @click="goBack">
					<view class="iconContainer">
						<u-icon name="arrow-left" size="20"></u-icon>
					</view>
				</view>
				<text class="title">选择餐厅</text>
				<view class="other">
					
				</view>
			</view>
			<view class="searchContainer">
				<u-search :showAction="true" actionText="搜索" :animation="true"></u-search>
			</view>
		</view>
		<view class="restaurantContainer">
			<view class="selectContainer">
				<u-tabs :list="selectList" lineColor="rgb(228,0,48)" lineHeight="5"
				:activeStyle="{color:'#333333',fontWeight:'bold',fontSize:'30rpx',transition:'all 0.3s'}"
				></u-tabs>
			</view>
			<view class="typeContainer">
				<view @click="status=1"
				:style="[status==1?{borderColor:'rgb(228,0,48)',color:'rgb(228,0,48)'}:{}]"
				><text>车道取餐</text></view>
				<view	@click="status=2"
				:style="[status==2?{borderColor:'rgb(228,0,48)',color:'rgb(228,0,48)'}:{}]"
				><text>早餐</text></view>
				<view @click="status=3"
				:style="[status==3?{borderColor:'rgb(228,0,48)',color:'rgb(228,0,48)'}:{}]"
				><text>K-Music</text></view>
				<view	@click="status=4"
				:style="[status==4?{borderColor:'rgb(228,0,48)',color:'rgb(228,0,48)'}:{}]"
				><text>洗手间</text></view>
				<view	@click="status=5"
				:style="[status==5?{borderColor:'rgb(228,0,48)',color:'rgb(228,0,48)'}:{}]"
				><text>购物中心</text></view>
			</view>
			<view class="allContent">
				<view class="restaurant" v-for="(restaurant,index) in restaurants" :key="index">
					<view class="restaurantImg">
						<view class="detail">
							餐厅详情 >
						</view>
						<view class="like">
							<u-icon name="heart" color="#FFF" size="21"></u-icon>
						</view>
					</view>
					<view class="allInfo">
						<view class="title">
							{{restaurant.name}}
						</view>
						<view class="browse" v-if="restaurant.isBrowse">
							<text>正在浏览</text>
						</view>
						<view class="address">
							<text>{{restaurant.address}}</text>
						</view>
						<view class="tradeInfo">
							<text class="ifTrade" v-if="restaurant.isTrade">营业中 | {{restaurant.tradeTime}}</text>
							<text class="ifTrade" v-if="!restaurant.isTrade">未营业，可预约 | {{restaurant.tradeTime}}</text>
						</view>
						<view class="gather" v-if="restaurant.ifGather">
							<u-icon name="info-circle" color="#999999"></u-icon>门店密集，请注意区分
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:0,
				selectList:[
					{
						name:'附近餐厅'
					},
					{
						name:'收藏&常去'
					}
				],
				restaurants:[
					{
						id:0,
						name:'xxx',
						address:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
						isTrade:false,
						isBrowse:true,
						tradeTime:'08:00-22:00',
						ifGather:false
					},
					{
						id:0,
						name:'xxx',
						address:'xxxxxxxxxx',
						isTrade:false,
						isBrowse:false,
						tradeTime:'08:00-22:00',
						ifGather:true
					},
					{
						id:0,
						name:'xxx',
						address:'xxxxxxxxxx',
						isTrade:false,
						isBrowse:false,
						tradeTime:'08:00-22:00',
						ifGather:true
					},
					{
						id:0,
						name:'xxx',
						address:'xxxxxxxxxx',
						isTrade:false,
						isBrowse:false,
						tradeTime:'08:00-22:00',
						ifGather:true
					}
				]
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.selectContainer{
		width: 100vw;
		.navBarContainer{
			margin-top: 100rpx;
			.navBar{
				width: 90%;
				margin: 0 auto;
				background-color: #FFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.back,.other{
					width: 70rpx;
				}
				.title{
					font-size: 30rpx;
				}
			}
			.searchContainer{
				width: 90%;
				margin: 0 auto;
				margin-top: 30rpx;
			}
		}
		.restaurantContainer{
			width: 100%;
			margin: 0 auto;
			background-color: #FFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			>view{
				width: 90%;
			}
			.selectContainer{
				margin-bottom: 20rpx;
			}
			.typeContainer{
				overflow-x: scroll;
				>view{
					transition: all 0.5s;
					float: left;
					font-size: 26rpx;
					border: 1px solid #d7d7d7;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 55rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
					>text{
						margin-left: 10rpx;
						margin-right: 10rpx;
					}
				}
			}
			.allContent{
				display: flex;
				flex-direction: column;
				margin-top: 40rpx;
				.restaurant{
					margin-bottom: 30rpx;
					width: 100%;
					border-radius: 20rpx;
					border: 1px solid #d7d7d7;
					display: flex;
					align-items: center;
					.restaurantImg{
						position: relative;
						width: 160rpx;
						height: 180rpx;
						background-color: aliceblue;
						border-radius: 15rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
						margin-bottom: 20rpx;
						.detail{
							position: absolute;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: rgb(236,236,236);
							font-size: 24rpx;
							bottom: 0;
							border-bottom-left-radius: 15rpx;
							border-bottom-right-radius: 15rpx;
							height: 60rpx;
						}
						.like{
							position: absolute;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: rgba(88,89,84,0.5);
							width: 60rpx;
							height: 60rpx;
							border-top-left-radius: 15rpx;
							border-bottom-right-radius: 30rpx;
						}
					}
					.allInfo{
						display: flex;
						flex-direction: column;
						margin-left: 30rpx;
						.title{
							font-size: 40rpx;
						}
						.browse{
							margin-top: 8rpx;
							font-size: 20rpx;
							width: 100rpx;
							height: 30rpx;
							border-radius: 15rpx;
							color:#fff;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: rgb(228,0,48);
							text{
								margin-left: 10rpx;
								margin-right: 10rpx;
							}
						}
						.address{
							color:#999999;
							margin-top: 10rpx;
							width: 400rpx;
							word-wrap: break-word;word-break: break-all;overflow: hidden;
						}
						.tradeInfo{
							color:rgb(247,142,37);
							font-size: 24rpx;
							margin-top: 10rpx;
							margin-bottom: 10rpx;
						}
						.gather{
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color:#999999;
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
